<template>
	<el-cascader :options="dirTree" filterable v-model="id" :props="props" clearable @change="changID">
      <template slot-scope="{ node, data }">
        <div class="projdiv">
          <div   v-if="data.inputtype" style="position: absolute; top:0;left:0;height:25px;z-index:10;width:95%;padding-left:6%">
          	<el-input size="small" v-focus ref="projname"  placeholder="请输入内容" prefix-icon="el-icon-search" v-model="projinput" @input="changprojinput"></el-input>
          </div>
              <span>{{data.label}}</span>
        </div>

		</template>
	</el-cascader>
</template>
<script>
import { getTreeData } from "@/api/dir";
import utils from '@/utils/utils'
export default {
     props: ["parentProjId",'dirType'],
  data() {
    let _this = this;
    return {
      timer:null,
      projinput:"",
      id: "",
      parentId: "",
      dirTree: [],
       current:1,
      size:20,
      props: {
        children: [],
        leaf: "isLeaf",
        lazy: true,
        checkStrictly: true,
        value: "id",
        lazyLoad(node, resolve) {
          _this.getAreaForLazyLoad(node, resolve);
        },
      },
    };
  },
  created() {
    this.dirgetTreeDataclick();
  },
    directives:{
    focus:{
      inserted:function(el){
        // el.children[1].focus()
        el.querySelector('input').focus();
      }
    }
  },
  watch: {
    parentProjId: {
      handler(val, oldval) {
        this.id = val;
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
    dirType(newval,oldval){
      this.dirType=newval
    }
  },
  methods: {
     changprojinput(data){
      console.log(data);
      this.projinput=data
      clearTimeout(this.timer)
      this.timer=setTimeout(() =>{
      this.dirgetTreeDataclick()
      },500);

    },
    changID(val) {
      if(val.length>0){
        this.parentId = val[val.length - 1];
        this.$emit("dirparenIdtchange", this.parentId);
      }else{
        this.$emit("dirparenIdtchange","");
      }
    },
    childrendata(data) {
      data.forEach((element) => {
        if (element.children == null) {
          this.$delete(element, "children");
        } else {
          this.childrendata(element.children);
        }
      });
      return data;
    },
    async getAreaForLazyLoad(node, resolve) {
      if (node.level >= 1) {
        if(!utils.isNull(node.data.data.dirLevel)){
          let level = Number(node.data.data.dirLevel) + 1;
          let nodes = await getTreeData({
            level: level,
            parentId: node.data.id,
            dirType:this.dirType
          });
          let data = this.childrendata(nodes.data.data);
          resolve(data);
        }
      }
    },
    dirgetTreeDataclick() {
      let params=new URLSearchParams()
      params.append('current',this.current)
      params.append('size',this.size)
       params.append('name',this.projinput)
       params.append('dirType',this.dirType)
      getTreeData(params,false).then((res) => {
        this.dirTree = res.data.data;
        this.dirTree.unshift({inputtype:true,isLeaf:true,disabled:true,data:{dirLevel:""}})
      });
    },
    load(node) {
      console.log("ssssssssssssssssssssssssnode");
    },
  },
};
</script>

<style>
</style>
